<template>
  <div class="ml-2 flex-1">
    <a-card :bordered="false" style="height: 850px; width: 1340px">
      <div style="font-weight: 600; font-size: 20px">1.下载批量导入模板</div>
      <a-divider />
      <div style="margin-bottom: 10px">
        请点击下载，并保存模板，根据模板内容填写信息
      </div>
      <a-button type="primary" style="margin-bottom: 50px">
        <VerticalAlignBottomOutlined></VerticalAlignBottomOutlined>
        采暖季应收计划模板.xls
      </a-button>
      <div style="font-weight: 600; font-size: 20px">
        2.导入采暖季应收计划表
      </div>
      <a-divider />
      <a-upload-dragger
        style="margin-bottom: 50px; margin-right: 50px"
        v-model:fileList="fileList"
        :customRequest="handleUpload"
        :showUploadList="{ showRemoveIcon: false }"
      >
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">请将填写好的文件拖拽至此，或点击选择文件</p>
        <p class="ant-upload-hint">
          （仅支持.xls、.xlsx、.et格式文件，文件大小限制2MB以内)
        </p>
      </a-upload-dragger>
      <div style="font-weight: 600; font-size: 20px">3.上传附件</div>
      <a-divider />
      <div style="margin-bottom: 10px">
        点击选择文件（仅支持pdf/doc/docx/xls/xlsx/png/jpg格式文件!)
      </div>
      <a-upload
        v-model:file-list="fileListData"
        :customRequest="handleUploadFile"
        :showUploadList="{ showRemoveIcon: false }"
      >
        <a-button>
          <upload-outlined></upload-outlined>
          上传文件
        </a-button>
      </a-upload>
      <a-divider />
      <!-- 居中 -->
      <div style="text-align: center; margin-top: 50px">
        <a-button style="margin-right: 20px" @click="cancel">
          取消提交
        </a-button>
        <a-button type="primary" style="margin-left: 20px" @click="submit">
          确认提交
        </a-button>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, h, watch, computed, toRaw } from 'vue';
import {
  InboxOutlined,
  UploadOutlined,
  VerticalAlignBottomOutlined,
} from '@ant-design/icons-vue';
import { upload, uploadAttachmentFile } from '#/api/core/heatingSeason';
import { message } from 'ant-design-vue';

const $emit = defineEmits(['closeDrawer']);
const submit = () => {
  message.success('提交成功');
  // 往父组件传值
  $emit('closeDrawer', false);
};
const cancel = () => {
  // 往父组件传值
  $emit('closeDrawer', false);
};

// 导入
const fileList = ref([]);
const handleUpload = async ({ file, onProgress, onSuccess, onError }) => {
  const updateProgress = (percent) => {
    file.percent = percent;
    onProgress({ percent });
  };
  const formData = new FormData();
  formData.append('file', file);
  const res = await upload(formData);

  if (res.data.code === 200) {
    updateProgress(100);
    file.status = 'done';
    onSuccess(res);
    message.success('上传成功');
  } else {
    file.status = 'error';
    onError(new Error(res.data.msg));
    message.error(res.data.msg);
  }
};

// 附件
const fileListData = ref([]);
const handleUploadFile = async ({ file, onProgress, onSuccess, onError }) => {
  const updateProgress = (percent) => {
    file.percent = percent;
    onProgress({ percent });
  };
  const formData = new FormData();
  formData.append('file', file);
  const res = await uploadAttachmentFile(formData);
  console.log('res', res);
  if (res.data.code === 200) {
    updateProgress(100);
    file.status = 'done';
    onSuccess(res);
    message.success('上传成功');
  } else {
    file.status = 'error';
    onError(new Error(res.data.msg));
  }
};
</script>

<style scoped></style>
